<!DOCTYPE html>
<html>
<head>
  <title>OSS in Browser</title>
  <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
  <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
  <link rel="stylesheet" href="bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="main">
    <table>
      <tr>
        <td>
          <div class="panel panel-primary">
            <div class="panel-heading">Upload file</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Select file</label>
                  <input type="file" id="file" />
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="object-key-file" value="object" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
                </div>
              </form>
              <br />
              <div class="progress">
                <div id="progress-bar"
                     class="progress-bar"
                     role="progressbar"
                     aria-valuenow="0"
                     aria-valuemin="0"
                     aria-valuemax="100" style="min-width: 2em;">
                  0%
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <script>
    var appServer = window.location.protocol + '//' + window.location.host + '/adm/aliyun/oss/sts/upload/token/for/admin';
    var bucket = 'tuntun';
    var region = 'oss-cn-beijing';

    var urllib = OSS.urllib;
    var Buffer = OSS.Buffer;
    var OSS = OSS.Wrapper;
    var STS = OSS.STS;

    var applyTokenDo = function (func) {
      var url = appServer;
      return urllib.request(url, {
        method: 'GET'
      }).then(function (result) {
        var data = JSON.parse(result.data);
        var creds = data.Credentials;
        var client = new OSS({
          region: region,
          accessKeyId: creds.AccessKeyId,
          accessKeySecret: creds.AccessKeySecret,
          stsToken: creds.SecurityToken,
          bucket: bucket
        });
        return func(client);
      });
    };

    var progress = function (p) {
      return function (done) {
        var bar = document.getElementById('progress-bar');
        bar.style.width = Math.floor(p * 100) + '%';
        bar.innerHTML = Math.floor(p * 100) + '%';
        done();
      }
    };

    var uploadFile = function (client) {
      var file = document.getElementById('file').files[0];
      var key = document.getElementById('object-key-file').value.trim() || 'object';
      console.log(file.name + ' => ' + key);

      return client.multipartUpload(key, file, {
        progress: progress
      }).then(function (res) {
        console.log('upload success: %j', res);
        return listFiles(client);
      });
    };

    window.onload = function () {
      document.getElementById('file-button').onclick = function () {
        applyTokenDo(uploadFile);
      }
    };
  </script>
</body>
</html>
